成果如下:

• 作者幫我們封裝了一層，好處是黑夜主題也能正常變色
• 有用到 elment-plus 的骨骼動畫

dark mode:

範例檔參考

• 作者 vue-pure-admin 原始碼
• echart 官網範例

程式碼

element-plus 格線系統不是 12 而是 24

首頁

\src\views\welcome\index.vue

<script setup lang="ts">
import { ref } from "vue";
import PieChart from "./Pie.vue";

defineOptions({
  name: "Welcome"
});

let loading = ref<boolean>(true);

setTimeout(() => {
  loading.value = !loading.value;
}, 800);
</script>

<template>
  <el-row :gutter="24" style="margin: 20px">
    <el-col
      :xs="24"
      :sm="24"
      :md="12"
      :lg="12"
      :xl="12"
      style="margin-bottom: 20px"
    >
      <el-card>
        <template #header>
          <span style="font-size: 16px; font-weight: 500">
            Pie Chart
          </span>
        </template>
        <el-skeleton animated :rows="7" :loading="loading">
          <template #default>
            <PieChart />
          </template>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
</template>

Pie components

\src\views\welcome\Pie.vue

<script setup lang="ts">
import { ref, computed, type Ref } from "vue";
//引入作者封裝的檔案
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";

const { isDark } = useDark();

let theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});

//除了原本支援的圖表 option 之外，作者加入了2個點擊事件的監聽
setOptions(
  {
    title: {
      text: "",
      subtext: "",
      left: "center"
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      orient: "vertical",
      left: "left"
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "65%",
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  },
  {
    name: "click",
    callback: params => {
        //可以取得點擊資料 ex: { value: 1048, name: "Search Engine" }
      console.log("click", params.data);
    }
  },
  // 點空白處
  {
    type: "zrender",
    name: "click",
    callback: params => {
      console.log("點空白處", params);
    }
  }
);
</script>

<template>
  <div ref="pieChartRef" style="width: 100%; height: 35vh" />
</template>